import { Button, Modal, Input, Spin } from "antd";
import { useState, useEffect } from "react";

const data = [
  "如何检查一个变量是否为数组？",
  "如何在JavaScript中使用箭头函数？",
  "如何使用JavaScript将字符串转换为数字？",
  "如何在JavaScript中比较两个日期？",
  "如何在JavaScript中创建一个对象并添加属性？",
  "如何使用JavaScript从数组中删除一个元素？",
  "如何使用JavaScript循环遍历对象的属性？",
  "如何使用JavaScript检查一个对象是否包含某个属性？",
  "如何使用JavaScript将数组中的元素反转？",
  "如何在JavaScript中创建一个函数？",
  "如何在JavaScript中将一个字符串分割成一个数组？",
  "如何在JavaScript中使用正则表达式？",
  "如何在JavaScript中使用条件语句？",
  "如何在JavaScript中使用闭包？",
  "如何使用JavaScript将一个对象转换为JSON字符串？",
  "如何在JavaScript中使用模板字面量？",
  "如何在JavaScript中使用Promise？",
  "如何在JavaScript中使用事件监听器？",
  "如何使用JavaScript将一个数组中的元素排序？",
  "如何在JavaScript中使用setTimeout函数？",
];

const answers = [
  "使用Array.isArray()方法检查变量是否为数组。",
  "使用箭头符号（=>）定义函数。",
  "使用parseInt()或parseFloat()方法将字符串转换为数字。",
  "将日期转换为时间戳，然后比较时间戳。",
  "使用对象字面量（{}）创建对象，并使用点号（.）或方括号（[]）添加属性。",
  "使用splice()方法删除元素。",
  "使用for...in循环遍历对象的属性。",
  "使用in运算符或hasOwnProperty()方法检查对象是否包含某个属性。",
  "使用reverse()方法将数组中的元素反转。",
  "使用function关键字或箭头函数（ES6及以上）定义函数。",
  "使用split()方法将字符串分割成一个数组。",
  "使用RegExp对象或正则表达式字面量创建正则表达式，然后使用正则表达式的方法进行匹配、替换等操作。",
  "使用if...else或switch语句进行条件判断。",
  "使用for、while或do...while循环语句进行循环。",
  "使用&&、||和!逻辑运算符进行逻辑判断。",
  "使用condition ? value1 : value2三元运算符进行条件判断。",
  "使用反引号（`）创建模板字面量，并使用${variable}插入变量。",
  "使用函数内部的嵌套函数创建闭包，并返回嵌套函数。",
  "将函数作为参数传递给另一个函数，并在另一个函数中调用该函数。",
  "使用Promise对象创建Promises，并使用.then()和.catch()方法处理异步操作的结果。",
];

const AiInterview = () => {
  const [index, setIndex] = useState(-1); // 初始化为-1，因为数组的第一个元素索引是0
  const [num, setNum] = useState(-1);
  const [usedIndexes, setUsedIndexes] = useState([]);
  const [visible, setVisible] = useState(false);
  const [userAnswer, setUserAnswer] = useState("");
  const [answering, setAnswering] = useState(false);

  const textToSpeech = (text: string) => {
    const synth = window.speechSynthesis;
    const utterance = new SpeechSynthesisUtterance(text);
    synth.speak(utterance);
  };

  useEffect(() => {
    console.log(index);
    if (index >= 0) {
      // 当index大于等于0时才会更新题目
      textToSpeech(data[index]);
    }
  }, [index]);

  const handleNextQuestion = (prev = false) => {
    // 如果所有题目都已经使用过，则重置usedIndexes
    if (usedIndexes.length === data.length) {
      setUsedIndexes([]);
    }

    let randomIndex;
    do {
      // 随机生成未使用过的题目
      randomIndex = Math.floor(Math.random() * data.length);
    } while (usedIndexes.includes(randomIndex));

    setIndex(prev ? usedIndexes[usedIndexes.length-2] : randomIndex);
    setUsedIndexes(prev ? usedIndexes.slice(0, usedIndexes.length-1) : [...usedIndexes, randomIndex]);
    setNum(prev ? num - 1: num + 1);
  };

  const handleEvaluate = () => {
    setAnswering(true);
    // 创建语音识别对象
    const recognition = new window.webkitSpeechRecognition();
    // 设置语言为中文
    recognition.lang = "zh-CN";
    // 开始识别
    recognition.start();
    // 监听识别结果
    recognition.onresult = (event) => {
      // 获取识别结果
      const transcript = event.results[0][0].transcript;
      // 将识别结果设置为用户答案
      setUserAnswer(transcript);
      setVisible(true);
      setAnswering(false);
    };
  };

  const handleCloseModal = () => {
    setVisible(false);
    setUserAnswer("");
  };

  const handleOkModal = () => {
    const correctAnswer = answers[index];
    const isCorrect = userAnswer.includes(correctAnswer);
    const result = isCorrect ? "回答正确！" : "回答错误！";
    alert(result);
    handleCloseModal();
  };

  return (
    <div>
      {index >= 0 ? ( // 当index大于等于0时才会显示题目
        <div>
          <p>
            第 {num + 1} 题：{data[index]}
          </p>
        </div>
      ) : (
        <p>请点击“下一题”按钮开始答题。</p>
      )}
      <div
        style={{
          display: "flex",
          marginTop: "200px",
          justifyContent: "center",
          alignItems: "center",
        }}
      >
        {usedIndexes.length > 1 && (
          <Button style={{ marginRight: "10px" }} onClick={() => handleNextQuestion(true)}>
            上一题
          </Button>
        )}
        {index >= 0 && (
          <Button disabled={answering} onClick={handleEvaluate}>
            语音答题
          </Button>
        )}
        <Button style={{ marginLeft: "10px" }} onClick={() => handleNextQuestion(false)}>
          下一题
        </Button>
      </div>
      {answering && (
        <Spin
          style={{ position: "absolute", left: "45%", top: "50%" }}
          tip="答题中..."
        />
      )}
      <Modal
        title="答案评估"
        visible={visible}
        onCancel={handleCloseModal}
        onOk={handleOkModal}
      >
        <p>您的答案是：{userAnswer}</p>
        <p>正确答案是：{answers[index]}</p>
      </Modal>
    </div>
  );
};

export default AiInterview;